<template>
  <hsa-dialog v-model:visible="dialogVisible" title="展示" width="750">
    <el-tabs v-model="activeTable" class="demo-tabs" @tab-click="changeTable">
      <el-tab-pane label="缓存结果展示" name="cache"></el-tab-pane>
      <el-tab-pane label="维值结果展示" name="dimensional"></el-tab-pane>
    </el-tabs>
    <!-- 对话框内容 -->
    <hsa-adaptive-pane>
      <hsa-title-pane>
        <hsa-title-pane-item
          :title="activeTable == 'cache' ? '缓存结果展示' : '维值结果展示'"
          fill
        >
          <template #toolbar v-if="activeTable !== 'cache'">
            <el-row style="width: 300px" :justify="'space-between'">
              <div>
                <el-select
                  style="width: 160px"
                  v-model="formData.name"
                ></el-select>
              </div>
              <div>
                <el-button>重置</el-button>
                <el-button type="primary">查询</el-button>
              </div>
            </el-row>
          </template>
          <hsa-table
            v-bind="cacheTableOption"
            v-if="activeTable == 'cache'"
          ></hsa-table>
          <hsa-table
            v-bind="dimensionalTableOption"
            v-if="activeTable == 'dimensional'"
          ></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <!-- 对话框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
    <result-detail ref="resultDetailRef"></result-detail>
  </hsa-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { HsaTableColumn } from "hsa-ui";
import resultDetail from "./result-detail.vue";
// tabs当前选中
const activeTable = ref("cache");
const formData = ref({
  name: "",
});
const resultDetailRef=ref(null)
const showDetail= (row:any)=>{
  resultDetailRef.value.open()
}

//tabs被点击
const changeTable = () => {};
// 控制对话框的显示与隐藏
const dialogVisible = ref(false);
const cacheTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "失败" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "时间", width: 220, prop: "time" },
    { align: "center", label: "缓存结果", minWidth: 200, prop: "cache" },
    { align: "center", label: "操作", minWidth: 200, prop: "handle" },
    {
      type: "button",
      label: "操作",
      fixed: 'right',
      buttonGroup: [
        {
          label: "详情",
          type: "primary",
          click: (row) => {
            console.log("详情", row);
            showDetail(row)
          },
        },
      ],
    },
  ]),
});

const dimensionalTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "失败" },
    { linkIP: "192.168.0.1", linkTime: "2016-05-03", isSuccess: "成功" },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "维值名称", width: 220, prop: "name" },
    { align: "center", label: "生成时间", minWidth: 200, prop: "createTime" },
  ]),
});

// 提交表单时的处理函数
const handleSubmit = () => {
  // 提交表单后关闭对话框
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>
